<template>
  <div class="project-condition">
    <p class="condition-item clearfix">
      <b>业务场景：</b>
      <Cascader
        class="option"
        :data="bizTypeDic"
        v-model="selectedBizType"
        change-on-select></Cascader>
    </p>
    <p class="condition-item clearfix">
      <b>项目关键词：</b>
      <Input v-model="params.term" class="option"></Input>
    </p>
    <p class="condition-item clearfix">
      <Button @click="screenCondition">筛选</Button>
      <Button type="text" @click="clearCondition">清空条件</Button>
    </p>
  </div>
</template>

<script>
import { queryDictByKeyApi } from '@/api/business-type'
import { addProp } from '@/libs/util'
export default {
  name: 'filter_board',
  data () {
    return {
      selectedBizType: [], // 选中业务类型数组
      bizTypeDic: [], // 所有业务类型字典
      params: {
        bizType: '',
        term: ''
      }
    }
  },
  computed: {
  },
  methods: {
    getDictList () {
      const params = {
        dictKey: 'businessType'
      }
      queryDictByKeyApi(params).then((res) => {
        if (res.data.code === 2000 && res.data.data && res.data.data.children) {
          const propArray = [{
            targetKey: 'dictId',
            hopeKey: 'value'
          }, {
            targetKey: 'dictName',
            hopeKey: 'label'
          }]
          this.bizTypeDic = addProp(res.data.data.children, [], propArray)
        }
      })
    },
    clearCondition () {
      this.selectedBizType = []
      this.params = {
        bizType: '',
        term: ''
      }
      this.$emit('on-clear', this.params)
    },
    screenCondition () {
      this.params.bizType = this.selectedBizType[this.selectedBizType.length - 1] || ''
      this.$emit('on-screen', this.params)
    }
  },
  activated () {
  },
  mounted () {
    this.getDictList()
  }
}
</script>

<style lang="less" scoped>
.project-condition {
  display: flex;
  padding: 10px;
  margin-bottom: 16px;
  background: #f8f8f9;
  p.condition-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding-right: 20px;
    b {
      font-size: 12px;
      font-weight: 600;
      float: left;
      min-width: 78px;
    }
    .option {
      float: left;
      width: 100%;
    }
  }
}
</style>
